<template>
  <div class="dashboard-container">
    <!-- 天地图卫星底图 -->
    <tdt-map
      class="map-background"
      :center="[115.892, 28.676]"
      :zoom="13"
      :min-zoom="4"
      :max-zoom="18"
      :enable-scroll-wheel-zoom="true"
      :enable-dragging="true"
      :enable-double-click-zoom="true"
      :enable-keyboard="true"
      :control="{
        scale: false,
        zoom: true,
        mapType: false,
      }"
      @load="onMapLoad"
    >
      <!-- 影像底图 -->
      <tdt-tilelayer-tdt :url="satelliteUrl" :z-index="1"></tdt-tilelayer-tdt>
      <!-- 影像标注 -->
      <!-- <tdt-tilelayer-tdt 
        :url="annotationUrl" 
        :z-index="2"
      ></tdt-tilelayer-tdt> -->
    </tdt-map>

    <!-- 阴影遮罩层 -->
    <ShadowOverlay :z-index="1" />

    <!-- 左侧面板 -->
    <div class="left-panel">
      <!-- 设备统计 -->
      <DeviceStatistics />
      <!-- 飞行架次统计 -->
      <FlightStatistics />
      <!-- 存储空间 -->
      <StorageStatistics />
    </div>

    <!-- 右侧面板 -->
    <div class="right-panel">
      <!-- 预警信息 -->
      <WarningInfo />
      <!-- 飞行里程 -->
      <FlightMileage />
      <!-- 今日飞行记录 -->
      <TodayFlightRecord />
    </div>

    <!-- 底部统计区域 -->
    <div class="bottom-statistics">
      <BottomStatistics />
    </div>
  </div>
</template>

<script setup>
import { onMounted, computed } from "vue";
import { useUserStore } from "@/stores/modules/user";
import { tiandituConfig } from "@/config";

// 导入组件
import DeviceStatistics from "./components/DeviceStatistics.vue";
import FlightStatistics from "./components/FlightStatistics.vue";
import StorageStatistics from "./components/StorageStatistics.vue";
import WarningInfo from "./components/WarningInfo.vue";
import FlightMileage from "./components/FlightMileage.vue";
import TodayFlightRecord from "./components/TodayFlightRecord.vue";
import BottomStatistics from "./components/BottomStatistics.vue";
import ShadowOverlay from "@/components/ShadowOverlay.vue";

const userStore = useUserStore();

// 使用随机域名平衡负载
const randomDomain = computed(() => Math.round(Math.random() * 7));

// 影像底图URL
const satelliteUrl = computed(() => {
  const url = tiandituConfig.serviceUrl.satellite.replace(
    "{s}",
    randomDomain.value
  );
  return `${url}?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tiandituConfig.apiKey}`;
});

// 影像标注URL
const annotationUrl = computed(() => {
  const url = tiandituConfig.serviceUrl.annotation.replace(
    "{s}",
    randomDomain.value
  );
  return `${url}?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tiandituConfig.apiKey}`;
});

// 地图加载完成回调
const onMapLoad = (map) => {
  console.log("天地图加载完成", map);
};

onMounted(() => {
  // 检查认证状态
  userStore.checkAuth();
});
</script>

<style lang="scss" scoped>
.dashboard-container {
  width: 100vw;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  /* 左侧面板 */
  .left-panel {
    position: absolute;
    left: 31px;
    top: 147px;
    z-index: 10;
    width: 404px;
    display: flex;
    flex-direction: column;
    gap: 21px;
    animation: slideRight 0.8s ease-out;
  }

  /* 右侧面板 */
  .right-panel {
    position: absolute;
    right: 31px;
    top: 147px;
    z-index: 10;
    width: 404px;
    display: flex;
    flex-direction: column;
    gap: 21px;
    animation: slideLeft 0.8s ease-out;
  }

  /* 底部统计区域 */
  .bottom-statistics {
    position: fixed;
    bottom: -48px;
    left: 0;
    right: 0;
    z-index: 10;
    width: 100%;
    height: 188px;
  }

  .map-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;

    :deep(.tdt-map-container) {
      width: 100% !important;
      height: 100% !important;
    }

    :deep(.BMap_mask) {
      pointer-events: none !important;
    }

    :deep(.anchorBL) {
      display: none !important;
    }
  }

  :deep(#dv-full-screen-container) {
    position: relative;
    z-index: 2;
    pointer-events: none;
    min-height: 100vh;
    height: auto !important;
  }
}

// 动画效果
@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideLeft {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideRight {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

// // 响应式设计
// @media (max-width: 1920px) {
//   .left-panel {
//     width: 280px;
//     left: 15px;
//   }

//   .right-panel {
//     width: 320px;
//     right: 15px;
//   }
// }

// @media (max-width: 1366px) {
//   .left-panel {
//     width: 250px;
//     left: 10px;
//   }

//   .right-panel {
//     width: 280px;
//     right: 10px;
//   }
// }
</style>
